<template>
	<view>
		<!-- 滑动标签 -->
		<index-swiper-tabbar :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap"></index-swiper-tabbar>
		<!-- 图文信息-->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight + 'px'}" :current="tabIndex" @change="swiperChange">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<scroll-view scroll-y class="list">
						<!-- 信息列表 -->
						<index-content-list :item="item1" v-for="(item1,index1) in item.list" :key="index1"></index-content-list>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 标签栏
				tabIndex:0, // 选中索引
				tabBars: [
					{name:"关注",id:"1"},
					{name:"健身",id:"2"},
					{name:"书籍",id:"3"},
					{name:"旅行",id:"4"},
					{name:"音乐",id:"5"},
					{name:"娱乐",id:"6"}
				],
				// 列表数据
				swiperIndex:0, // 当前swiper索引
				swiperHeight:0,
				swiperList:[
					{
						list:[
							{
								userPic:"/static/img/header/01.svg", // 头像
								username:"JayChou", // 用户名
								isFollow:true, // 是否关注
								title:"最美的不是下雨天，是曾与你躲过雨的屋檐！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"38w", // 播放数
								playLong:"10:30", // 播放时长
								coverPic:"/static/img/demo/img01.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:18, // 微笑数
									cryNum:9 // 哭泣数
								},
								commentNum:288, // 评论数
								shareNum:66 // 分享数
							},
							{
								userPic:"/static/img/header/02.svg", // 头像
								username:"MrThinco", // 用户名
								isFollow:false, // 是否关注
								title:"做一件有价值的事情，坚持下去等待时间的回报吧！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img02.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:13, // 微笑数
									cryNum:2 // 哭泣数
								},
								commentNum:388, // 评论数
								shareNum:32 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img03.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"如果你知道去哪儿，世界也会为你让路！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"12w", // 播放数
								playLong:"06:20", // 播放时长
								coverPic:"/static/img/demo/img04.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:16, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/02.svg", // 头像
								username:"MrThinco", // 用户名
								isFollow:false, // 是否关注
								title:"无论怎样，明天的太阳依旧会照常升起！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img05.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:36, // 微笑数
									cryNum:12 // 哭泣数
								},
								commentNum:67, // 评论数
								shareNum:30 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/02.svg", // 头像
								username:"MrThinco", // 用户名
								isFollow:false, // 是否关注
								title:"做一件有价值的事情，坚持下去等待时间的回报吧！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img02.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:13, // 微笑数
									cryNum:2 // 哭泣数
								},
								commentNum:388, // 评论数
								shareNum:32 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img03.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img03.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"如果你知道去哪儿，世界也会为你让路！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"12w", // 播放数
								playLong:"06:20", // 播放时长
								coverPic:"/static/img/demo/img04.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:16, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/01.svg", // 头像
								username:"JayChou", // 用户名
								isFollow:true, // 是否关注
								title:"继续全力奔跑，和优秀的人一起做有挑战的事情。！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"38w", // 播放数
								playLong:"10:30", // 播放时长
								coverPic:"/static/img/demo/img04.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:18, // 微笑数
									cryNum:9 // 哭泣数
								},
								commentNum:288, // 评论数
								shareNum:66 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img03.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"如果你知道去哪儿，世界也会为你让路！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"12w", // 播放数
								playLong:"06:20", // 播放时长
								coverPic:"/static/img/demo/img04.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:0, // 0：没有操作，1：顶，2：踩
									smileNum:16, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							},
							{
								userPic:"/static/img/header/02.svg", // 头像
								username:"MrThinco", // 用户名
								isFollow:false, // 是否关注
								title:"无论怎样，明天的太阳依旧会照常升起！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img05.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:36, // 微笑数
									cryNum:12 // 哭泣数
								},
								commentNum:67, // 评论数
								shareNum:30 // 分享数
							}
						]
					},
					{
						list:[
							{
								userPic:"/static/img/header/01.svg", // 头像
								username:"JayChou", // 用户名
								isFollow:true, // 是否关注
								title:"继续全力奔跑，和优秀的人一起做有挑战的事情。！", // 标题
								type:'video', // img：图文，video：视频
								playNum:"38w", // 播放数
								playLong:"10:30", // 播放时长
								coverPic:"/static/img/demo/img04.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:1, // 0：没有操作，1：顶，2：踩
									smileNum:18, // 微笑数
									cryNum:9 // 哭泣数
								},
								commentNum:288, // 评论数
								shareNum:66 // 分享数
							},
							{
								userPic:"/static/img/header/03.svg", // 头像
								username:"手艺人", // 用户名
								isFollow:false, // 是否关注
								title:"生死看淡，不服就干，越努力，越幸运！", // 标题
								type:'img', // img：图文，video：视频
								coverPic:"/static/img/demo/img03.jpg", // 封面图
								infoNum:{ // 顶踩信息
									index:2, // 0：没有操作，1：顶，2：踩
									smileNum:19, // 微笑数
									cryNum:20 // 哭泣数
								},
								commentNum:28, // 评论数
								shareNum:10 // 分享数
							}
						]
					}
				]
			}
		},
		onLoad() {
			// 设置swiperHeight
			uni.getSystemInfo({
			    success: (res) => {
					this.swiperHeight = res.windowHeight - uni.upx2px(100);
			    }
			});
		},
		methods: {
			// tabbar点击
			tabTap(index) {
				this.tabIndex = index;
			},
			// swiper滑动
			swiperChange(e) {
				this.tabIndex = e.detail.current;
			}
		}
	}
</script>

<style lang="scss">

</style>
